<!-- 主页面 -->
<!DOCTYPE html>
<html lang="en">
  <script src="/static/js/index.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var Server = {
             movies: {{ movies|tojson }}
  };</script>
<!-- 爬虫按钮 -->
<script>
  function runScripts() {
      // 使用AJAX发送请求到后端，以运行Python脚本
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/run_scripts', true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.onreadystatechange = function() {
          if (xhr.readyState == 4 && xhr.status == 200) {
              alert('Scripts executed successfully.');
          }
      };
      xhr.send(JSON.stringify({scripts: ['main.py']}));
  }
  </script>

  <head>
        <title>首页</title>
        <meta charest="UTF-8"/>
        <style>
            table {
                width: 100%;
                border-collapse: collapse;
            }
            th, td {
                border: 1px solid black;
                padding: 8px;
                text-align: left;
            }
            th {
                background-color: #f2f2f2;
            }
        </style>
       <link rel="stylesheet" href="../static/css/index.css">
  </head>
<!-- 导航栏 -->
<body>
  <nav>
      <ul class="nav-list">
          <li><a href="/">首页</a></li>
          <li><a href="/page1">分类统计</a></li>
          <li><a href="/page2">评分统计</a></li>
          <li><a href="#about">关于我们</a></li>
      </ul>
  </nav>
</body>
  <h2>运行爬虫</h2>

  <button onclick="runScripts()">开始</button>

<!--登录信息显示 -->
<ul class="tologout">
  <div class="logined"></div> 
  <li class="dropdown">
    <a
       class="select"
       href="#"
       id="userDropdown"
       role="button"
       data-toggle="dropdown"
       aria-haspopup="true"
       aria-expanded="false"
    >
    <span class="login_username"
                >{{ login_username }}</span
    >
    <img
      class="img-profile rounded-circle"
      src="../static/img/avatar.png"
    />
  
<!-- 下拉信息显示 -->
      <div class="informations" 
            aria-labelledby="userDropdown">
      <a
        class="dropdown-item"
        href="#"
        data-toggle="modal"
        data-target="#logoutModal"
      >退出</a>
  <div
      class="modal fade"
      id="logoutModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    > 
<!-- Logout Modal-->
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">确定要离开吗？</h5>          
            <a class="quit" href="/logout">退出</a>
          </div>
        </div>
      </div>
    </div>
      </div>
      </li>
    </ul>
   
  


    <table
    class="table table-bordered"
    id="dataTable"
    width="100%"
    cellspacing="0"
    >
        <thead>
        <tr>
          <th>电影名称</th>
          <th>图片</th>
          <th>导演</th>
          <th>主演</th>
          <th>类型</th>
          <th>制片国家/地区</th>
          <th>上映日期</th>
          <th>评分</th>
          <th>片长</th>
          <th>语言</th>
          <!-- <th>操作</th> -->
        </tr>
      </thead>

        <tbody>
        {% for movie in movies %}
        <tr style="font-size: small;">
          <td>{{ movie.title }}</td>
          <td>
            <img
              src="{{ movie.cover }}"
              width="100px"
              height="100px"
            />
          </td>
          <td>{{ movie.directors }}</td>
          <td style="width: 100px;font-size: small;">{{ movie.casts }}</td>
          <td>{{ movie.types }}</td>
          <td>{{ movie.country }}</td>
          <td>{{ movie.release_date }}</td>
          <td>{{ movie.rating }}</td>
          <td>{{ movie.time }}</td>
          <td style="width: 100px;font-size: small;">{{ movie.lang }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>


<!-- 引入 Bootstrap JS 和依赖的 Popper.js 以及 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.5/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</html>
